<style lang="scss" scoped>
.tabNav{
        padding-top: 10px;
        background-color: #fff;
        .navItem{
            padding: 0 5%;
            height: 45px;
            border-bottom: 1px solid #eee;
            display: flex;
            .itemImg{
                width: 40px;
                height: 45px;
                display: flex;
                align-items: center;
                img{
                    height: 29px;
                }
            }
            .itemName{
                width: calc(100% - 60px);
                height: 45px;
                line-height: 45px;
                text-align: right;
                color: #999;
                font-size: 15px;
            }
            .itemRight{
                position: relative;
                width: 20px;
                height: 45px;
                &::after{
                    position: absolute;
                    content:'';
                    width: 10px;
                    height: 10px;
                    border-top: 1px solid #999;
                    border-right: 1px solid #999;
                    transform: rotate(45deg);
                    top: 17px;
                    right: 0;
                }
            }
        }
    }
    .btn{
        width:80%;
        margin-left: 10%;
        margin-top: 20px;
    }
    .setup{
        background-color: #f5f5f5;
        height: 100vh;
    }
</style>
<template>
    <div class="setup">
        <p-navigator 
            :text="'设置'"
            />
        <div class="tabNav">
            <div class="navItem" 
                v-for="(item,index) in tabNav" 
                :key="index"
                @click="item.path ? $router.push(item.path) : ''">
                <div class="itemImg">
                    <img :src="item.imgUrl" alt="">
                </div>
                <div class="itemName">
                    {{ item.title }}
                </div>
                <div class="itemRight">

                </div>
            </div>
        </div>
        <div class="btn">
            <van-button 
            block
            round 
            type="info"
            @click="out()">
                退出登录
            </van-button>
        </div>
    </div>
</template>
<script>
    // 导入接口
    import { loginOut } from '@/api'
    export default {
        data() {
            return {
                tabNav: [
                    {
                        title: '修改资料',
                        imgUrl: require('../../../assets/user/set/revise.png'),
                        path: '/edituser'
                    },
                    {
                        title: '修改密码',
                        imgUrl: require('../../../assets/user/set/password.png'),
                        path: '/editpas'
                    },
                    {
                        title: '收货地址',
                        imgUrl: require('../../../assets/user/address/address.png'),
                        path: '/address'
                    },
                    {
                        title: '打赏记录',
                        imgUrl: require('../../../assets/user/set/incite.png')
                    },
                    {
                        title: '给个Star吧',
                        imgUrl: require('../../../assets/user/set/score.png')
                    },
                    {
                        title: '给极点建议',
                        imgUrl: require('../../../assets/user/set/proposal.png'),
                        path: '/suggest'
                    },
                    {
                        title: '关于极点的那些事',
                        imgUrl: require('../../../assets/user/set/into.png')
                    }
                ]
            }
        },
        methods: {
            out(){
                // vant弹出框
                this.$dialog.confirm({
                    // 确认框的标题
                    title: '提示',
                    // 确认框的内容
                    message: '退出登录后，操作不可逆，再次进入需要重新登录，确认退出吗？',
                }).then(() => {
                    // 点击确认按钮回调
                    loginOut().then(res => {
                        // 服务端数据响应
                        // console.log(res.data);
                        
                        if(res.data.code === 1){
                            // 先清空本地所有的数据
                            localStorage.clear();
                            // 弹出退出成功
                            this.$toast('退出成功')
                            // 延迟返回
                            setTimeout(() => {
                                this.$router.push('/login')
                            }, 1000);
                        }
                    })
                }).catch(() => {
                    // 点击取消按钮回调
                    this.$toast('取消退出')
                })
            }
        }
    }
</script>